import React, { Component } from "react";
import Walk from "../components/Walk";
import Phone from "../components/Phone";
import "../assets/css/Login.css";
import { withRouter } from "react-router-dom";
import Popup from "../components/Popup";
import { errorToast, successToast } from "../components/Toast";
import checkPhone from "../hooks/checkPhone";
class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      phone: "",
      password: "",
      name: "",
      registerShow: false,
    };
    this.ChangePhone = this.ChangePhone.bind(this);
    this.ChangeName = this.ChangeName.bind(this);
    this.ChangePassword = this.ChangePassword.bind(this);
    this.toggleRegister = this.toggleRegister.bind(this);
    this.ToForgotPassword = this.ToForgotPassword.bind(this);
    this.GoLogin = this.GoLogin.bind(this);
    this.GoRegister = this.GoRegister.bind(this);
  }
  ToForgotPassword() {
    this.props.history.push("/forgotPassword");
  }
  ChangePhone(e) {
    this.setState({
      phone: e.target.value,
    });
  }
  ChangeName(e) {
    this.setState({
      name: e.target.value,
    });
  }
  ChangePassword(e) {
    this.setState({
      password: e.target.value,
    });
  }
  toggleRegister() {
    this.setState({
      registerShow: !this.state.registerShow,
      phone:'',
      password:'',
      name:''
    });
  }

  GoLogin() {
    if (this.state.phone !== "" && this.state.password !== "") {
      if (checkPhone(this.state.phone)) {
        this.$axios
          .post("/login", {
            password: this.state.password,
            phone: this.state.phone,
          })
          .then((res) => {
            if (res.data.code === 200) {
              successToast(res.data.msg);
              var obj = {
                token: res.data.token,
                expiresTime: new Date().getTime(),
              };
              localStorage.setItem("loginInfo", JSON.stringify(obj));
              this.props.history.push(
                JSON.parse(localStorage.getItem("ToLoginPage"))["path"]
              );
            } else {
              errorToast(res.data.msg);
            }
          });
      } else {
        errorToast("手机号码格式不正确");
      }
    } else {
      errorToast("请输入手机号和密码");
    }
  }
  GoRegister() {
    if (
      this.state.phone !== "" &&
      this.state.name !== "" &&
      this.state.password !== ""
    ) {
      if (checkPhone(this.state.phone)) {
        if (this.state.name.length <= 10) {
          var firstChar = this.state.password[0].toLowerCase();
          if (
            this.state.password.length >= 6 &&
            this.state.password.length <= 16 &&
            firstChar <= "z" &&
            firstChar >= "a"
          ) {
            this.$axios
              .post("/register", {
                nickName: this.state.name,
                password: this.state.password,
                phone: this.state.phone,
              })
              .then((res) => {
                if (res.data.code === 100) {
                    successToast(res.data.msg);
                  setTimeout(() => {
                    this.toggleRegister();
                  }, 2000);
                } else {
                    errorToast(res.data.msg);
                }
              });
          } else {
            errorToast("密码长度6-16位且以字母开头");
          }
        } else {
            errorToast("昵称长度1-10位");
        }
      } else {
        errorToast("手机号码格式不正确");
      }
    } else {
        errorToast("请填写完整信息！");
    }
  }
  render() {
    return (
      <div className="Login">
        <Walk>
          <p slot="main">欢迎回来</p>
          <p slot="sub">Please login to your accounts</p>
        </Walk>
        <div className="login_form">
          <Phone
            title="手机号"
            placeholder="请输入手机号"
            ChangePhone={this.ChangePhone}
          ></Phone>
          <Phone
            eye="true"
            title="密码"
            placeholder="密码"
            ChangePhone={this.ChangePassword}
          ></Phone>
        </div>
        <div className="login_forget">
          <span  onClick={this.ToForgotPassword}>忘记密码？</span>
        </div>
        <div className="login_btn">
          <button onClick={this.GoLogin}>登录</button>
          <button onClick={this.toggleRegister}>注册</button>
        </div>
        {this.state.registerShow && (
          <Popup closePopup={this.toggleRegister}>
            <div className="popup_box">
              <span className="popup_title">注册</span>
              <div className="popup_form">
                <Phone
                  title="手机号"
                  placeholder="请输入手机号"
                  ChangePhone={this.ChangePhone}
                ></Phone>
                <Phone
                  title="昵称"
                  placeholder="1-10位昵称"
                  ChangePhone={this.ChangeName}
                ></Phone>
                <Phone
                  eye="true"
                  title="密码"
                  placeholder="密码"
                  ChangePhone={this.ChangePassword}
                ></Phone>
                <button className="popup_register" onClick={this.GoRegister}>
                  注册
                </button>
              </div>
            </div>
          </Popup>
        )}
      </div>
    );
  }
}

export default withRouter(Login);
